<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <div id="app"></div>
   <script src="../../js/react.development.js"></script>
   <script src="../../js/react-dom.development.js"></script>
   <script src="../../js/babel.min.js"></script>


    <script type="text/babel">
       
        

        // 自动化时钟： 时间 （状态） / 秒针（行为） 都是自动化

        //01  自定义实例属性方式 ：不能触发render
        class Clock extends React.Component{
            constructor(props){
                console.log('-------constructor');
                super(props)
                this.time = new  Date().toLocaleTimeString()
                this.state1 = {time:new  Date().toLocaleTimeString()}
            }
            
 
            render(){
                console.log('-------render');
                return (
                    <div>
                        <h1>Clock</h1>
                        <h3>time:{this.state1.time}</h3>
                    </div>
                )
            }
           
            // 第一次渲染完毕执行componentDidMount
            componentDidMount(){
                console.log('-------componentDidMount');
                setInterval(()=>{
                    console.log('setInterval');
                    //改变状态=>时间=>重新渲染=>更新时间
                    //  this.time = new Date().toLocaleTimeString()
                    // 能改变状态 ，不能触发render执行
                     this.state1 = {time:new Date().toLocaleTimeString}   
                     console.log(this);
                },1000)
            }
        }

        //02  强制更新 （执行render）
        class Clock extends React.Component{
            constructor(props){
                console.log('-------constructor');
                super(props)
                this.time = new  Date().toLocaleTimeString()
                this.state1 = {time:new Date().toLocaleTimeString()}
            }
            
 
            render(){
                console.log('-------render');
                return (
                    <div>
                        <h1>Clock</h1>
                        <h3>time:{this.state1.time}</h3>
                    </div>
                )
            }
           
            // 第一次渲染完毕执行componentDidMount
            componentDidMount(){
                console.log('-------componentDidMount');

                // this.state1.time = new Date().toLocaleTimeString()
                // console.log(this.state1);
                // this.forceUpdate()
                
                // setTimeout(() => {
                //     this.state1.time = new Date().toLocaleTimeString()
                //     this.forceUpdate() 
                // }, 1000);
                
                setInterval(()=>{
                    this.state1.time = new Date().toLocaleTimeString()
                    this.forceUpdate() 
                },1000)
            }
        }

        // 03 : 自己状态 / 自动更新
        class Clock extends React.Component{
            constructor(props){
                console.log('-------constructor');
                super(props)
                
                //01 state 初始化状态=> 通过this 挂载到组件实例上
                this.state={
                    time:new Date().toLocaleTimeString()
                }
            }
            
            // 方式2
            // state = { time:new Date().toLocaleTimeString()}
 
            render(){
                console.log('-------render');
                return (
                    <div>
                        <h1>Clock</h1>
                        <h3>time:{this.state.time}</h3>
                    </div>
                )
            }
           
            // 第一次渲染完毕会执行componentDidMount
            componentDidMount(){
                console.log('-------componentDidMount');

                setInterval(()=>{
                    //改变状态=>时间=>重新渲染=>更新时间
                    // 作用：改变状态 ，触发render执行
                    this.setState({time:new Date().toLocaleTimeString()})
                },1000)
            }
        }

        // ReactDOM.render(<Clock time={new Date().toLocaleTimeString()}/>,document.getElementById('app'))


        //04 props 改变 执行render
        // class Clock extends React.Component{
        //   constructor(props){
        //         console.log('-------constructor');
        //         super(props) //this.props = props
        //     }
            
        //     // pros 发生改变 重新执行render (重新渲染)
        //     render(){
        //         console.log('-------render');
        //         return (
        //             <div>
        //                 <h1>Clock</h1>
        //                 <h3>time:{this.props.time}</h3>
        //             </div>
        //         )
        //     }
           
        //     // 第一次渲染完毕执行componentDidMount
        //     componentDidMount(){
        //         console.log('-------componentDidMount');
        //     }
        // }

        // setInterval(() => {
        //     var e = <Clock time={new Date().toLocaleTimeString()}/>
        //     ReactDOM.render(e,document.getElementById('app'))
        // }, 1000);
         

        // render 总结：
        // this.forceUpdate()=> 不能改变状态 需要手动赋值， 能执行render
        // this.setState() =>能改变状态 自动执行render
        // props变化=>能执行render

        // 数据源头
        // state : 自己数据 
        // props : 外面数据

        // 05 setState
        class N extends React.Component{
          
            
            //01 定义状态
            state = {n:10}
 
            render(){
                console.log('-------render');
                console.log('render',this.state.n);
                return (
                    <div>
                        <h3>N:{this.state.n}</h3>
                    </div>
                )
            }
           
            // 第一次渲染完毕会执行componentDidMount
            componentDidMount(){
                console.log('-------componentDidMount');  
                // this.setState({
                //     n:20
                // })

                //验证： setState 是异步的 ，this.state.n = 10
                // console.log('setState 之后',this.state.n);

                // 需求：setState执行之后直接获取值 
                // 解决：通过回调函数 获取改变后的值
                this.setState({n:20},()=>{
                    console.log('callback',this.state.n);
                })

                // setState 是同步的还是异步
                // setState 可能是异步的

            }
        }

        ReactDOM.render(<N />,document.getElementById('app'))


    </script>
</body>
</html>